<template>
<div class="search-result">
    <router-link :to="`/singer/${this.bestArt[0].id}`"  v-if="this.bestArt[0]&&this.bestArt[0].id">
        <best-match v-show="this.bestList.artist" :bestArt="bestArt"></best-match>
    </router-link>
    <song-item v-if="resultList.length>0" :item="resultList" :keywords="keywords"  @play="$emit('play',$event)"></song-item>
    <div v-else-if="!resultList" class="more">{{!this.resultList?"暂无相关结果":""}}</div>
    <music-loading v-else></music-loading>

    <router-view></router-view>
</div>
    

</template>

<script>
import SongItem from "@/components/SongItem.vue"
import MusicLoading from "@/components/MusicLoading.vue"
import BestMatch from '@/components/BestMatch.vue'

export default {
    props:{
        keywords:[String,Number,Boolean]
    },
    data(){
        return{
           resultList:[],
           bestList:[],
           bestArt:[]
        }
    },
    created(){
        this.getResultList(),
        this.getBestMatch()
    },
    methods:{
        async getResultList(){
            let res=await this.axios.get(`/cloudsearch?keywords=${this.keywords}&limit=30&offset=30`)
            if(res&&res.result.songCount<1){
                 this.resultList=false
                return
            }
            let  resultList=res.result.songs
            this.resultList= resultList.map(item=>{
                item.song={
                    artists:item.ar,
                    album:item.al,
                    privilege:item.privilege,
                    alias:item.alia, 
                }
                return item
            })
        },
        async getBestMatch() {
            let res = await this.axios.get(`/search/multimatch?keywords=${this.keywords}`);
            this.bestList = res.result;
            if (res.result.artist) {
                this.bestArt = this.bestList.artist;
            }
            console.log(this.bestList.artist)
		},
    },
    components:{
        SongItem,
        MusicLoading,
        BestMatch,
    }
}
</script>

<style lang="less" scoped>
.more{
  height: 55px;
  line-height: 55px;
  text-align: center;
}
</style>